/*
表单实例 HTMLFormElement
常用的两个方法:submit() reset()

表单里面的元素常用的事件:
focus
blur
change

*/

//选择文本 input和textArea都有这个功能
var unameInput = document.forms[0].elements[0];

//unameInput.select(); //自动选择文本框内所有的文本 用户可以一次删除所有 会触发select事件
unameInput.setSelectionRange(1,3); //范围选择例如只选择第2,3个字符(不包含最后一个值的下标) 必须先执行select函数再设置选择范围,或者设置焦点
unameInput.focus();//设置选择范围后 设置焦点也能看到选中的文本
//html5新增的属性 获取选中的文本内容 ie8及之前的版本不支持
var start = unameInput.selectionStart //选中的开始下标
var end = unameInput.selectionEnd //选中的结束下标
var selectStr = unameInput.value.substring(start,end);
console.log('selectStr',selectStr);

var myIpt = document.getElementById("myInput");
myIpt.addEventListener("keypress",onInputKeyPress);
function onInputKeyPress(keyEvent) {
    var keyCode = keyEvent.keyCode;
    var char = String.fromCharCode(keyCode);
    console.log('char',char);
    /*
    在Firefox 中，所
    有由非字符键触发的keypress 事件对应的字符编码为0，而在Safari 3 以前的版本中，对应的字符编
    码全部为8。为了让代码更通用，只要不屏蔽那些字符编码小于10 的键即可
    */
    if (!/\d/.test(char) && !keyEvent.ctrlKey && keyCode>9) {//屏蔽输入非数字的内容
        keyEvent.preventDefault();
    }
}

//操作剪贴板

//跨浏览器获取剪切板数据的函数
function getClipData(event) {
    
    if (window.clipboardData) {//ie下
        return window.clipboardData.getData("text");//传入要获取的数据格式
    }else
    {
        //其他浏览器        
        return event.clipboardData.getData("text");
    }
}
//跨浏览器设置剪切板数据的函数
function setClipData(event,value) {
    if (window.clipboardData) {
        window.clipboardData.setData('text',value);
    }else
    {
        event.clipboardData.setData("text/plain",value); //非ie浏览器的type类型
    }
}
//跨浏览器清楚剪切板数据
function setClipData(event,value) {
    if (window.clipboardData) {
        window.clipboardData.clearData();
    }else
    {
        event.clipboardData.clearData();
    }
}

myIpt.addEventListener("copy",onCopy);
myIpt.addEventListener("paste",onPaste);
myIpt.addEventListener("beforecopy",onBeforeCopy);

function onPaste(event) {
    var data = getClipData(event);// 粘贴事件可以获取得到剪切板的数据
    console.log("onPaste",data,event.clipboardData);
}

function onCopy(event) {
    var data = getClipData(event);//copy事件获取不了剪切板的数据
    console.log("onCopy",data,event.clipboardData);
}

function onBeforeCopy(event) {
    //var data = getClipData(event); // beforecopy 事件获取不了剪切板的数据
    //console.log("onBeforeCopy",data);
    setClipData(event,"剪切板数据");
}

/*
checkValidity() 表单和所有表单字段都有该方法
使用方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如
果字段的值有效，这个方法返回true，否则返回false
*/

//选中框脚本

/*
选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段共
有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。
 add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）
之前。
 multiple：布尔值，表示是否允许多项选择；等价于HTML 中的multiple 特性。
 options：控件中所有<option>元素的HTMLCollection。
 remove(index)：移除给定位置的选项。
 selectedIndex：基于0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，
只保存选中项中第一项的索引。
 size：选择框中可见的行数；等价于HTML 中的size 特性。
*/

var select = document.getElementById("selLocation");
select.addEventListener("change",onSelectChange);

function onSelectChange(event) {
    console.log("select.selectedIndex",select.selectedIndex);
    select.value; //value取决于option标签中设置的value属性值如果设置了值则是value属性值否则是标签键的文本值
    var selectionOne = select.options[select.selectedIndex]; //获取选中项
    var selectedOptions = select.selectedOptions;//对于多选状态下有多个 单选只有一个
    console.log("selectionOne.selected",selectionOne.selected);

}

var myChangeBtn = document.getElementById("myChangeBtn");
myChangeBtn.addEventListener('click',onClick);

function onClick(event) {
    select.options[2].selected = true; //选中特定项
}

function addOptionByDom(selectBox,text,value) { //通过dom操作添加 
    var option = document.createElement("option");
    var textNode = document.createTextNode(text);
    option.appendChild(textNode);
    option.value = value;
    selectBox.appendChild(option); 
}

function addOptionByFn(selectBox,text,value) { //通过select对象的add方法添加 这是最好的方法
    var opt = new Option(text,value);
    selectBox.add(opt,undefined); //最后一个参考参数 undefined 表示在最后添加 否则在其之前添加
}
addOptionByDom(select,'我增加的',"addByMe");
addOptionByFn(select,'我最新增加的',"addByMeNew");
select.remove(0);
//selectbox.options[0] = null; 这样也可以移除第一项
function removeAll(select) {
    var options = this.options;
    var len = options.length;
    for(let i = 0;i<len;i++){
        this.remove(i);
    }
}
/*
https://www.cnblogs.com/season-huang/p/3439277.html
对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。
它们都是编码URL，唯一区别就是编码的字符范围，其中
encodeURI方法不会对下列字符编码  ASCII字母、数字、~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。
*/
//序列化表单字段的函数
function serialize(form) {
    var parts = [],field = null,i,len,j,optLen,option,optValue;
    for (i =0,len = form.elements.length; i < len;i++) {
        field = form.elements[i];
        switch (field.type) {
            case "select-one":
            case "select-multiple": //是一个select列表
                if (field.name.length) {
                    for(j = 0,optLen=field.options.length;j < optLen;j++)
                    {
                        option = field.options[j];
                        if (option.selected) {
                            if (option.hasAttribute) {
                                optValue = option.hasAttribute('value')?option.value:option.text;
                            }else{
                                //specified 字段验证是否设置了value属性
                                optValue = option.attributes['value'].specified?option.value:option.text;
                            }
                        }
                        //对url后面的参数编码使用 encodeURIComponent 因为其编码范围更大 对用户输入的内容兼容更好
                        parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
                    }
                }
                break;
            case undefined: //字段集
            case "file": //文件输入
            case "submit": //提交按钮
            case "reset": //重置按钮
            case "button": //自定义按钮
                //以上这些字段是不需要提交到表单的
                break;
            case "radio": //单选按钮
            case "checkbox": //复选框
                if (!field.checked){
                break;
                }
                /* 执行默认操作 */
            default:
                //不包含没有名字的表单字段
                if (field.name.length){
                parts.push(encodeURIComponent(field.name) + "=" +
                encodeURIComponent(field.value));
                }
        
           
        }
        
    }

    return parts.join("&");
}